<template>
  <el-card>
    <template #header>
      <h2>添加权限</h2>
    </template>
    <el-form label-width="100" label-position="top">
      <el-form-item label="角色名">
        <el-input v-model="form.group"></el-input>
      </el-form-item>
      <el-form-item>
        <template #label>
          <el-button :icon="Plus" @click="addPermissions">权限</el-button>
        </template>
        <el-row :gutter="10" justify="space-between" v-for="(p, i) in form.permissions"
          :key="p.group" label-width="50" class="permissions">
          <el-form-item label="路径">
            <el-input v-model="form.permissions[i].resource"></el-input>
          </el-form-item>
          <el-form-item label="方法">
            <el-checkbox-group v-model="form.permissions[i].methods">
              <el-checkbox value="*">*</el-checkbox>
              <el-checkbox :disabled="form.permissions[i].methods[0] === '*'"
                value="GET">GET</el-checkbox>
              <el-checkbox :disabled="form.permissions[i].methods[0] === '*'"
                value="POST">POST</el-checkbox>
              <el-checkbox :disabled="form.permissions[i].methods[0] === '*'"
                value="PUT">PUT</el-checkbox>
              <el-checkbox :disabled="form.permissions[i].methods[0] === '*'"
                value="PATCH">PATCH</el-checkbox>
              <el-checkbox :disabled="form.permissions[i].methods[0] === '*'"
                value="DELETE">DELETE</el-checkbox>
            </el-checkbox-group>
          </el-form-item>
          <el-form-item label="动作">
            <el-radio-group v-model="form.permissions[i].action">
              <el-radio value="*">*</el-radio>
              <el-radio value="allow">允许</el-radio>
              <el-radio value="deny">禁止</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-row>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="save">保存</el-button>
        <el-button type="info">取消</el-button>
      </el-form-item>
    </el-form>

  </el-card>
</template>
<script setup>
/* eslint-disable import/no-extraneous-dependencies */
/* eslint-disable no-param-reassign */
import { ref, watch } from 'vue';
import { Plus } from '@element-plus/icons-vue';
import { addRulesApi } from '../../api/rules';

const form = ref({
  group: '',
  permissions: [
    {
      methods: ['GET'],
      action: 'allow',
      resource: '',
    },
  ],
});

async function save() {
  const data = { ...form.value };
  data.permissions.forEach((el) => {
    if (el.methods[0] === '*') {
      el.methods = '*';
    }
  });
  console.log(data);
  const res = await addRulesApi(data);
  console.log(res.data);
}

watch(form.value.permissions, (newVal) => {
  newVal.forEach((el) => {
    if (el.methods.length > 1 && el.methods.includes('*')) {
      el.methods.splice(0);// 清空
      el.methods.push('*');
    }
  });
}, { deeps: true });

function addPermissions() {
  form.value.permissions.push({
    methods: ['GET'],
    action: 'allow',
    resource: '',
  });
}
</script>
<style lang="scss">
.permissions {
  border: 1px solid rgba(0, 0, 0, 0.1);
  margin-bottom: 10px;
  padding: 10px;
}
</style>
